<template>
  <div class="designer">
    <el-dialog :visible.sync="visible" title="变更产品配置人" :close-on-click-modal="false" @close="handleBack">
      <c-form-container :column="1" :bottom="false">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="110px">
          <el-form-item label="当前产品配置人">
            <div>{{ oldDesigner }}</div>
          </el-form-item>
          <el-form-item v-if="detailData[0].proConfigType === 'CUSTOMIZE'" prop="person" label="变更后产品配置人">
            <input-with-dialog
              v-model="formData.proConfigurator"
              :props="{label:'userName',value:'account'}"
              :multiple="false"
              :focus-query="true"
              :config="designerConfig"
              @change="designerChange"
            />
          </el-form-item>
          <el-form-item v-else prop="person" label="变更后产品配置人">
            <input-with-dialog
              v-model="formData.proConfigurator"
              :props="{label:'personnelName',value:'personnelCode'}"
              :multiple="false"
              :focus-query="true"
              :config="personnelConfig"
              @change="personnelChange"
            />
          </el-form-item>
        </el-form>
      </c-form-container>
      <div slot="footer">
        <el-button size="mini" @click="handleBack">取消</el-button>
        <el-button type="primary" size="mini" @click="confirmHandle">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { submitAllocationTask, getTaskDetail } from '@/api/proConfig'
export default {
  name: 'AddSample',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      oldDesigner: '',
      formData: {
        staff: ''
      },
      formDataList: [],
      formRules: {},
      designerConfig: {
        title: '产品配置人',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/user/listUsers`,
        setting: [
          {
            prop: 'account',
            title: '编码'
          },
          {
            prop: 'userName',
            title: '名称'
          }
        ]
      },
      personnelConfig: {
        title: '产品配置人',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configPersonnelAndOffice/page`,
        setting: [
          {
            prop: 'personnelName',
            title: '编码'
          },
          {
            prop: 'personnelCode',
            title: '名称'
          }
        ]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.oldDesigner = this.detailData.map(v => v.proConfiguratorName).join(',')
    this.detailData.forEach(v => {
      getTaskDetail(v.id).then(res => {
        if (res.success) this.formDataList.push(res.data)
      })
    })
    if (this.detailData[0].proConfigType !== 'CUSTOMIZE') {
      const otherFilter = [
        { 'id': 'officeCode', 'property': 'officeCode', 'operator': 'in', 'value': '[' + this.detailData.map(v => v.officeCode).join(',') + ']' },
        { 'id': 'personnelPost', 'property': 'personnelPost', 'operator': '=', 'value': this.detailData[0].proConfigType === 'RESOURCES' ? 'A' : 'B' },
        { 'id': 'enable', 'property': 'enable', 'operator': '=', 'value': '1' }]
      this.$set(this.personnelConfig, 'filtersRaw', otherFilter)
    }
    // this.formData.id = this.detailData.id
    // getTaskDetail(this.formData.id).then(res => {
    //   if (res.success && res.data) {
    //     this.formData = res.data
    //     this.oldDesigner = this.formData.proConfiguratorName
    //     let personnelPost = 'B'
    //     if (this.formData.proConfigType === 'RESOURCES') {
    //       personnelPost = 'A'
    //     }
    //     const otherFilter = [{ 'id': 'officeCode', 'property': 'officeCode', 'operator': '=', 'value': this.formData.officeCode },
    //       { 'id': 'personnelPost', 'property': 'personnelPost', 'operator': '=', 'value': personnelPost },
    //       { 'id': 'enable', 'property': 'enable', 'operator': '=', 'value': '1' }]
    //     this.$set(this.personnelConfig, 'filtersRaw', otherFilter)
    //   }
    // })
  },
  methods: {
    designerChange(row) {
      this.formData.proConfiguratorCode = row[0].account
      this.formData.proConfiguratorName = row[0].userName
    },
    personnelChange(row) {
      this.formData.proConfiguratorCode = row[0].personnelCode
      this.formData.proConfiguratorName = row[0].personnelName
    },
    // 返回
    handleBack() {
      this.dialogShow = false
      this.clearForm()
    },
    clearForm(done) {
      this.formData = {
        staff: []
      }
      this.oldDesigner = ''
      this.$refs.rulesForm && this.$refs.rulesForm.clearValidate()
      done && done()
    },
    confirmHandle() {
      this.$refs.form.validate(validate => {
        if (validate) {
          const itemSuccess = true
          this.formDataList.forEach(v => {
            const data = {
              ...v,
              proConfiguratorCode: this.formData.proConfiguratorCode,
              proConfiguratorName: this.formData.proConfiguratorName
            }
            submitAllocationTask(data).then(res => {
              if (!res.success)itemSuccess === false
            })
          })
          if (itemSuccess) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.dialogShow = false
            this.clearForm()
            this.$emit('success', false)
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.designer{
  display: inline-block;
}
</style>
